<template>
    <div>
        <!-- app权限-->
        <div class="role_checkout">
            <p class="role_checkout_name">app/小程序自定义权限:</p>

            <el-checkbox-group
                v-model="appCheckoutList"
                class="role_checkout_group"
            >
                <template v-for="role in checkList" :key="role.value">
                    <el-checkbox :value="role.value" :label="role.label" />
                </template>
            </el-checkbox-group>
        </div>
    </div>
</template>

<script setup lang="ts">
let appCheckoutList = ref([] as any);

const props = defineProps({
    checkList: {
        required: true,
        default: () => [] as any,
    },
});

defineExpose({ appCheckoutList });
onBeforeMount(() => {});
</script>

<style lang="scss" scoped>
.role_checkout {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    color: #222222;
    font-size: 14px;
    color: #222222;
    padding: -20px;
    &_name {
        @include textChangeRow;
        color: #222222;
        max-width: 80px;
        padding-bottom: 20px;
    }
    &_group {
        flex: 1;
        flex-wrap: wrap;
        margin-left: 4px;
    }
    label {
        margin-bottom: 20px;
        height: 100%;
        line-height: 120%;
    }
}
</style>
